/*
 * @Author: your name
 * @Date: 2022-01-06 19:33:07
 * @LastEditTime: 2022-01-09 11:45:53
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue_test\src\router\index.js
 */
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "../pages/About";
import Home from "../pages/Home";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";

//创建并暴露一个路由器
export default new VueRouter({
  routes: [
    {
      path: "/about",
      component: About,
    },
    {
      path: "/home",
      component: Home,
      children: [
        {
          path: "news",
          component: News,
        },
        {
          path: "message",
          component: Message,
          children: [
            {
              name: "xiangqing",
              path: "detail",
              component: Detail,
              //props的第一种写法：值为对象，该对象中的所有key-value都会以props的形式传给Detail组件
              //props: { a: 1, b: "hello" },

              //props的第二种写法：值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数以props形式传给Detail组件
              //props: true,

              //props的第三种写法：值为函数，
              props($route) {
                return {
                  id: $route.query.id,
                  title: $route.query.title,
                };
              },
            },
          ],
        },
      ],
    },
  ],
});
